<template>
  <div class="menuTabs-container">
    <div class="row_name" style="display: flex;align-items: center;" >
      <div class="line"></div>
      <span class="row_title" :style="{width:labelWidth+ 'px'}">{{ name }}</span>
    </div>
    <div :style="{ width: 'calc(100% - ' + labelWidth + 'px)' }" class="row_name row_tabs">
      <div v-for="(item_i, index) in list" :key="index" :class="{ active: item_i.key == active, tabs_item: true }" @click="tabs_click(item_i)">
        <div class="tabs_item_text">
          <p class="tabs_item_name">{{ item_i.name }}</p>
          <p class="tabs_item_count">{{ item_i.count }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuTabs',
  data() {
    return {
      default_active: null,
      update: true
    }
  },
  props: {
    list: {
      type: Array,
      required: true
    },
    column: {
      type: Number,
      required: false
    },
    active: {
      type: [String, Number],
      required: true
    },
    name: {
      type: [String],
      default: function () {
        return ''
      }
    },
    labelWidth: {
      type: [Number],
      required: true
    },
    labelStyle: {
      type: [Object],
      required: false,
      default: function () {
        return {}
      }
    }
  },
  created() {
    this.default_active = this.active
  },
  methods: {
    tabs_click(item) {
      this.default_active = item.key
      this.$emit('tabs_click', item.key)
    }
  }
}
</script>
<style scoped lang="scss">
.menuTabs-container {
  display: flex;
  vertical-align: middle;
  justify-content: center;
  .row_title_tip {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #5473e8;
  }
  .row_title {
    margin: 20px 8px;
    display: inline-block;
  }
  .row_name {
    display: inline-block;
    color: #606266;
    font-size: 14px;
    font-weight: 700;
  }
  .row_tabs {
    display: inline-block;
    margin-bottom: 12px;
    .tabs_item {
      text-align: center;
      display: inline-block;
      border: 1px solid #e2e7eb;
      margin-right: 12px;
      border-radius: 4px;
      box-shadow: 0px 0px 10px #eee;
      padding: 0px 20px;
      margin-bottom: 12px;
      .tabs_item_text {
        display: flex;
        vertical-align: middle;
        display: inline-block;
        text-align: center;
        color: #333;
        .tabs_item_name {
          font-weight: 700;
          margin: 8px 0 4px 0;
        }
        .tabs_item_count {
          margin: 4px 0 8px 0;
          font-size: 18px;
        }
      }
    }
    .tabs_item:hover {
      cursor: pointer;
      box-shadow: 0px 0px 10px #ccc;
    }
    .tabs_item:last-child {
      margin-right: 0px;
    }
    .active {
      border: 0px;
      background-image: linear-gradient(270deg, #8dabf5 0%, #5473e8 100%);
      .tabs_item_name {
        font-weight: 700;
        color: #fff;
        margin: 8px 0 4px 0;
      }
      .tabs_item_count {
        margin: 4px 0 8px 0;
        color: #fff;
        font-size: 18px;
      }
    }
  }
  .row_tabs:last-child {
    margin-bottom: 0px;
  }
}

.line {
  margin: 13px 5px;
  // border-left: 5px solid rgb(64, 158, 255);
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background:  #5c79e9;

  display: inline-block;
}
</style>

